<template>
   <div class="yw-order-container yw-service">
     <van-nav-bar title="服务认证" right-text="导师守则" @click-right="czxy = !czxy" left-arrow class="icon-return" @click-left="$router.push({name:'service'})"></van-nav-bar>
     <!-- 0 -->
      <div class="content">
        <p class="icons_line icons_fw1 color-6 font-28">服务封面照(必填)</p>
        <p class="font-28 color-6 text-align-c desc">请上传您{{xiaoxi.authWay}}</p>
        <van-row type="flex" justify="space-between" class="space">
          <van-col span="12">
              <img :src="$imgPath(xiaoxi.example)" @click="bigimg()"/>
              <p class="color-9 font-24 text-align-c test">示例</p>
          </van-col>
          <van-col span="12" class="uploadFile position-r">
              <img v-if="img1 == ''" src="../../assets/image/service/button_file@2x.png" alt="" srcset="">
              <img v-else :src="$imgPath(img1)" alt="" srcset="">
              <van-loading class="lading-black" type="spinner" v-if="loading" color="white" size="30px" />
              <input type="file" class="file-box" accept="image/gif,image/jpeg,image/jpg,image/png" value="11111" ref="avatarInput1" @change="changeImage()">
              <p class="color-9 font-24 text-align-c test">{{xiaoxi.authWay}}</p>
          </van-col>
        </van-row>
      </div>
      <!-- 0 -->
      <!-- 1 -->
      <div class="content audio" v-if="isZD">
        <p class="icons_line icons_fw2 color-6 font-28">语音服务(必填)</p>
        <p class="font-28 color-6 text-align-c desc">录制{{xiaoxi.name}}服务介绍<span class="color-9 font-24 fr">限时20秒内</span></p>
        <p class="text-align-c"><img src="../../assets/image/service/img_recording@2x.png" /></p>
        <van-row type="flex" justify="space-between">
          <van-col span="8" class="text-align-c">
            <span class="color-9 font-28">状态：</span><span class="color-6 font-28">{{audioId ? '已录制' : '未录制'}}</span>
          </van-col>
          <van-col span="8" class="text-align-c playaudio">
            <img src="../../assets/image/service/button_play_gray@2x.png" />
            <img src="../../assets/image/service/button_play@2x.png" style="display: none" />
          </van-col>
          <van-col span="8" class="text-align-c">
            <span class="color-9 font-28">{{YuYinTime ? YuYinTime : '00.00'}}/20.00 s</span>
          </van-col>
        </van-row>
        <p class="text-align-c btn" @click="isIosVoice()">
          <span class="btn-f00 btn-success">{{audioId ? '重新录制' : '开始录制'}}</span>
        </p>
      </div>
      <div class="content audio" v-else>
        <p class="text-align-c font-28 color-6 nullVoice">
          <van-loading class="lading-voice" type="spinner" v-if="loadingVoice" color="white" size="30px" />
          <em v-if="audioId == ''">暂未上传语音</em>
          <em v-if="audioId != ''">上传成功</em>
        </p>
        
        <p class="updateVooce">
          <input type="file" class="file-box" multiple="multiple" ref="avatarInput2" @change="changeVoice()">
          <span class="btn-f00 btn-success">请上传语音</span>
        </p>
      </div>
      <!-- 1 -->
      <!-- 2 -->
      <div class="content">
        <p class="icons_line icons_fw3 color-6 font-28">服务说明(必填)</p>
        <p class="fwdescribtion position-r"><textarea class="color-9" :placeholder="xiaoxi.introduce" v-model="descript" @input="descriptCheck"></textarea><span>{{descript.length}}/200</span></p>
      </div>
      <!-- 2 -->
      <!-- 3 -->
      <div class="content">
        <p class="icons_line icons_fw4 color-6 font-28">服务设置(必填)<span class="fr setup" @click="listentoLevelClick()">{{dwValue}}</span></p>
        <p class="text-align-c submit"><span class="btn-f00 btn-success" @click="addService()">申请认证</span></p>
        <p class="color-9 text-align-c">提交即代表同意<em class="protocol-style" @click="rightBox = true" >《简单竞戈导师认证协议》</em></p>     
      </div>
      
      <!-- 3 -->
      <!-- level -->
      <van-popup v-model="level" position="bottom" class="dwlevel">
          <div style="padding: 0">
            <van-row class="title">
                <van-col span="22" class="text-align-c color-6 font-3">请选择段位等级</van-col>
                <van-col span="2"><em class="fr color-default" @click="level=!level">完成</em></van-col>
            </van-row>
            <van-picker :columns="columns" @change="onChange" />
        </div>
      </van-popup>
      <!-- level// -->
      <!-- audio -->
      <van-popup v-model="audio" class="audioPopup">
          <service-audio></service-audio>
      </van-popup>
      <!-- audio// -->
      <van-popup v-model="bigimgbox">
        <img class="bigimg" :style="{width:imgWidth}" :src="$imgPath(xiaoxi.example)" alt="">
      </van-popup>
      <!-- 陪玩守则弹框 -->
      <van-popup v-model="czxy" position="right" :overlay="false">
            <div class="czxy-style" @click="czxy = !czxy">
                <h2>简单竞戈平台陪玩行为守则</h2>                
                <h3>一．A类</h3>
                <h4>处罚规则：出现投诉且成立，立即封号，不做解释。</h4>
                <h4>举报人奖励规则：获得该陪玩后台余额50%</h4>
                <span>1.私下谩骂、诋毁以及对用户进行恶意骚扰，人身攻击，威胁用户等。</span>
                <span>2.怂恿其他导师加入竞争平台。</span>
                <span>3.越过平台让用户私下下单或引导至第三方平台下单。</span>
                <span>4.导师与导师或用户之间发生恶意争吵。</span>
                <span>5.代打、转单、开脚本、素质低、态度不好等。</span>
                <span>6.不服从管理，挑衅考核和管理，开变声器接单。</span>
                <span>7.平台禁止一些线下下单，一经发现将立即起诉。平台受法律保护。</span>
                <span>8.利用活动、打折等方式恶意刷单，制造虚假陪玩订单给平台造成损失。</span>
                <h3>二．B类</h3>
                <h4>处罚规则：</h4>
                <h4>1.第一次投诉成立，提高官方抽成7天处理，扣除100元。</h4>
                <h4>2.第二次投诉成立，提高官方抽成15天处理，扣除200元。</h4>
                <h4>3.第三次投诉成立，封号处理。</h4>
                <h4>※投诉成立后如需退单由陪玩自行承担</h4>
                <h4>举报人奖励规则：获得100元奖金</h4>
                <span>1.	技术与水平和考核等级严重不符，重新考核处理。</span>
                <span>2.	恶意诋毁其他导师。</span>
                <span>3.	未按照订单时长服务完毕用户，在订单开始后未专心服务用户，同时服务多个用户。</span>
                <span>4.	与用户游戏时，连续因个人技术原因崩盘，从新考核处理。</span>
                <span>5.	多个导师同时接单时严禁嘲讽、甩锅等。</span>               
                <h3>三．C类</h3>
                <h4>处罚规则：</h4> 
                <h4>1.第一次投诉成立，提高官方抽成5天处理。</h4>            
                <h4>2.第二次投诉成立，提高官方抽成10天处理。</h4>
                <h4>3.第三次投诉成立，封号处理。</h4>
                <h4>※投诉成立后如需退单由陪玩自行承担</h4>
                <span>1.在服务中谩骂、诋毁及对用户进行恶意骚扰、人身攻击等扣除100元。</span>
                <span>2.无故未及时接单，导致用户取消订单扣除10元起。</span>
                <span>3.在游戏时，态度消极，不认真，练英雄，或者因个人原因导致游戏失败。经用户举报有效，降低单价处理。</span>
                <span>4.确认订单后不进行服务者，罚款双倍订单金额。</span>
                <span>5.接单期间不说话，不沟通，对用户体验造成影响的。无条件取消该订单，且扣除50元。</span>
                <span>6.接单后未打完的订单没有主动还单的，无条件退款，并罚100元(若导师后台没有余额，并且也没有通过支付宝/微信/QQ等支付软件将单钱转给官方人员，那待审时间将无上限延长。直到将单钱还清为止)。</span>
                <h3>四．D类</h3>
                <h4>处罚规则：</h4> 
                <h4>1.第一次投诉成立，提高官方抽成3天处理。</h4>            
                <h4>2.第二次投诉成立，封号5天并降级处理。</h4>
                <h4>3.第三次投诉成立，封号处理。</h4>
                <h4>举报人奖励规则：获得该陪玩扣除款项50%</h4>
                <span>1.利用简单竞戈任意宣传渠道（网站，群等）与简单竞戈无关的言论，以及任何形式的互黑、诋毁他人，对他人形象造成损坏的扣除100元。</span>
                <span>2.泄露内部通知给他人扣除50元。</span>
                <span>3.接单时应优先还单，其次是预约订单（已下单为准，口头预约不算），最后是即时订单。没有按照此先后顺序进行还单，而导致用户不满。</span>
                <span>4.禁止在语音软件、导师群、私下私聊导师等任何地方嘲讽、谩骂导师和用户等，禁止议论用户造成用户流失，所有对用户和导师或者平台造成负面影响。第一次罚款100封号3天，第二次直接封号处理永不解封。</span>
                <p>以上行为规则用户反馈，导师反馈以及其他证明皆有效。</p>   
            </div>            
        </van-popup>
        <!-- 简单约完导师认证协议 -->
         <van-popup v-model="rightBox" position="right" :overlay="true">
        <div class="guize" @click="rightBox = !rightBox">
          <h2>简单竞戈导师申请协议</h2>

          <p>本《导师申请协议》是您（下称"用户"）与西咸新区简单竞戈在线科技有限公司（下称"简单竞戈"）之间在申请成为简单竞戈旗下简单竞戈平台（下称"简单竞戈"）导师人员（下称"导师"）时签署的协议。</p>

          <p>1、重要须知---在签署本协议之前，简单竞戈正式提醒用户：</p>
          <p class="sub">1.1、您应认真阅读（未成年人应当在监护人陪同下阅读）、充分理解本《导师申请协议》中各条款，包括免除或者限制简单竞戈玩责任的免责条款及对用户的权利限制条款。</p>

          <p class="sub">1.2、除非您接受本协议，否则用户无权也无必要继续接受简单竞戈的服务，可以退出本次注册。用户点击接受并继续使用简单竞戈的服务，视为用户已完全的接受本协议。</p>

          <p class="sub">1.3、本协议一经签署，具有法律效力，请您慎重考虑是否接受本协议。</p>

          <p class="sub">1.4、在您签署本协议之后，此文本可能因国家政策、产品以及履行本协议的环境发生变化而进行修改，修改后的协议发布在本网站上，若您对修改后的协议有异议的，请立即停止登录、使用简单竞戈产品及服务，若您登录或继续使用简单竞戈产品，视为对修改后的协议予以认可。</p>

          <p>2、关于“简单竞戈帐号”</p>
          <p class="sub">2.1、简单竞戈旗下业务平台简单竞戈网（XXXXXX）、简单竞戈（XXXXXX）上同时提供用户注册通道，用户在任一通道注册获得简单竞戈帐号。</p>

          <p class="sub">2.2、用户在首次注册简单竞戈账户成功之后，简单竞戈会按系统规则自动分配给用户一个UID号码，UID号码与简单竞戈账号一样是用户接受简单竞戈服务的身份识别凭证。</p>

          <p class="sub">2.3、简单竞戈账号以及UID号码的性质上是简单竞戈提供服务授予用户的凭证，简单竞戈账号和UID号码是简单竞戈相应计算机软件作品的一部分，即简单竞戈将相关产品计算机软件著作权授权给注册用户的授权凭证。</p>

          <p class="sub">2.4、简单竞戈账号还是用户持有、使用相关虚拟财产、道具的身份凭证。用户若需要接受简单竞戈提供的增值服务，简单竞戈账号同时也是用户支付费用、接受增值服务的凭证。</p>

          <p class="sub">2.5、用户应当妥善保管自己的简单竞戈账号、密码，用户就其账号及密码项下之一切活动负全部责任，包括用户数据的修改，虚拟道具的损失以及其他所有的损失由用户自行承担。用户如发现他人未经许可使用其账号时立即通知简单竞戈。</p>

          <p class="sub">2.6、用户简单竞戈账号在丢失或遗忘密码后，可通过手机验证码的方式找回，如果未绑定手机号，需联系简单竞戈客服进行申诉找回帐号。用户应不断提供能增加账号安全性的个人密码保护资料。对用户因被他人冒名申诉而致的任何损失，简单竞戈不承担任何责任。</p>

          <p class="sub">2.7、用户保证注册简单竞戈账号时填写的身份信息是真实的，任何非法、不真实、不准确的用户信息所产生的责任由用户承担。如果因用户的注册信息不真实而引起的问题，以及对问题发生所带来的后果，简单竞戈不负任何责任。</p>

          <p class="sub">2.8、如用户违反法律法规、简单竞戈各服务协议或简单竞戈导师守则等规定，简单竞戈有权根据相关规则进行违规判定，并采取相应限制或处罚措施，包括但不限于：限制或冻结用户对简单竞戈帐号的使用，限制或停止某项单独服务（如线上LOL导师），扣除保证金，扣减收入分成并根据实际情况决定是否恢复使用。</p>

          <p>3、审核通过的导师不得从事以下行为：</p>
          <p class="sub">3.1、利用简单竞戈平台发表、传播代练、代打、政治、色情等相关信息。</p>

          <p class="sub">3.2、利用简单竞戈平台产生欺诈、诱导买家第三方平台进行交易等行为，如私单、微信红包、QQ红包等。</p>

          <p class="sub">3.3、在服务过程中进行挂机、代打、消失、消极服务、谩骂等行为。</p>

          <p class="sub">3.4、进行其他任何违法以及侵犯其他个人、公司、社会团体、组织的合法权益的行为。</p>

          <p class="sub">3.5、利用简单竞戈平台产生欺诈、诱导买家第三方平台进行交易等行为，如私单、微信红包、QQ红包等。</p>

          <p>4、简单竞戈声明</p>
          <p class="sub">4.1、用户须明白，在服务过程中可能存在有来自任何他人的包括威胁性的、诽谤性的、令人反感的或非法的内容或行为或对他人权利的侵犯（包括知识产权）的匿名或冒名的信息的风险，用户须承担以上风险，简单竞戈对服务不作担保，不论是明确的或隐含的，包括所有有关信息真实性、适当性、适于某一特定用途、所有权和非侵权性的默示担保和条件，对因此导致任何因用户不正当或非法使用服务产生的直接、间接、偶然、特殊及后续的损害，不承担任何责任。</p>

          <p class="sub">4.2、使用简单竞戈服务必须遵守国家有关法律和政策等，维护国家利益，保护国家安全，并遵守本条款，对于用户违法或违反本协议的使用(包括但不限于言论发表、传送等)而引起的一切责任，由用户负全部责任。</p>

          <p class="sub">4.3、简单竞戈的服务同大多数因特网产品一样，易受到各种安全问题的困扰，包括但不限于： 1）透露详细个人资料，被不法分子利用，造成现实生活中的骚扰； 2）哄骗、套取密码； 对于发生上述情况的，用户应当自行承担责任。</p>

          <p class="sub">4.4、用户须明白，简单竞戈为了服务整体运营的需要，有权在公告通知后修改或中断、中止或终止服务而不需通知您的权利，而无须向第三方负责或承担任何赔偿责任。</p>

          <p>5、知识产权</p>

          <p class="sub">5.1、简单竞戈的服务包括运营的网站、网页应用、软件以及内涵的文字、图片、视频、音频等元素，简单竞戈服务标志、标识以及专利权，简单竞戈对此享有上述知识产权。</p>

          <p class="sub">5.2、用户在使用简单竞戈服务时发表上传的文字、图片、视频、软件以及表演等用户原创的信息，此部分信息的知识产权归用户，但用户的发表、上传行为是对简单竞戈平台的授权，用户确认其发表、上传的信息非独占性、永久性的授权，该授权可转授权。简单竞戈可将前述信息在简单竞戈旗下的服务平台上使用，可再次编辑后使用，也可以由简单竞戈授权给合作方使用。</p>

          <p class="sub">5.3、若简单竞戈平台内的信息以及其他用户上传、存储、传播的信息有侵犯的用户或第三人的知识产权的，简单竞戈网站提供投诉通道。</p>

          <p>6、隐私保护</p>

          <p class="sub">6.1、请用户注意勿在使用简单竞戈服务中透露自己的各类财产帐户、银行卡、信用卡、第三方支付账户及对应密码等重要资料，否则由此带来的任何损失由用户自行承担。</p>

          <p class="sub">6.2、用户的简单竞戈账号、密码属于保密信息，简单竞戈应当采取积极的措施保护用户账号、密码的安全。</p>

          <p class="sub">6.3、用户的注册信息作为简单竞戈的商业秘密进来保护。但用户同时明白，互联网的开放性以及技术更新非常快，非简单竞戈可控制的因素导致用户泄漏的，简单竞戈不承担责任。</p>

          <p class="sub">6.4、用户在使用简单竞戈服务时不可将自认为隐私的信息发表、上传至简单竞戈，也不可将该等信息通过简单竞戈的服务传播给其他人，若用户的行为引起的隐私泄漏，由用户承担责任。</p>

          <p class="sub">6.5、简单竞戈在提供服务时可能会搜集用户信息，简单竞戈会明确告知用户，通常信息仅限于用户姓名、性别、年龄、出生日期、身份证号、家庭住址、教育程度、公司情况、所属行业、兴趣爱好等。</p>

          <p class="sub">6.6、就下列相关事宜的发生，简单竞戈不承担任何法律责任： 1）简单竞戈根据法律规定或相关政府、司法机关的要求提供您的个人信息； 2）由于用户将用户密码告知他人或与他人共享注册账户，由此导致的任何个人信息的泄漏，或其他非因简单竞戈原因导致的个人信息的泄漏； 3）任何由于黑客攻击、电脑病毒侵入造成的信息泄漏； 4）因不可抗力导致的信息泄漏；</p>

          <p>7、其他条款</p>

          <p class="sub">7.1、本协议由简单竞戈公布在网站上，对简单竞戈具有法律约束力；用户一经点击接受或者直接登录的行为视为对本协议的接受，对用户具有法律约束力。</p>
          
        </div>
      </van-popup>
   </div>
</template>
<script>
import apiHttp from '../../api/index'
  import { Popup, Toast } from 'vant';
  import { Uploader } from 'vant';
  import audioChild from '@/components/serviceChild/audio'
  import levelChild from '@/components/serviceChild/serviceLevel'
  export default {
  data() {
    return {
      active: 2,
      filter: false,
      level: false,//等级
      audio: false,//录音,
      serviceId: this.$route.params.serviceId,
      xiaoxi:{},
      columns:['请选择段位'],
      dwList:[],
      img1:'',
      dwValue:'请选择段位等级',
      descript:'',  //服务说明
      secondAttributeIds:0,
      czxy:false,
      rightBox:false,
      status:1,//1：已经完善个人信息，2：没有完善
      audioId:'',
      isZD:false,
      loading:false,
      loadingVoice:false,
      bigimgbox:false,
      imgWidth:'',
      YuYinTime:''
    }
  },
  components:{
    'service-level': levelChild,
    'service-audio': audioChild
  },
  mounted(){
    window.iosVicoeUpdate  = this.iosVicoeUpdate
    window.iosYuYinTime = this.iosYuYinTime
    this.imgWidth = document.body.clientWidth + 'px'
    this.fwService()
    this.getServiceInfo()
    this.checkUserInfo()
    if(this.$store.state.iosTrue == true){
      this.isZD = true
    }else{
      this.isZD = false
    }
  },
  methods: {
    // 获取录制语音的时间
    iosYuYinTime(time){
        this.YuYinTime = time
    },
    // 双击图片放大
    bigimg(){
      this.bigimgbox = true
    },
    //服务说明验证
    descriptCheck(){              
      if(this.descript.length>=200){
        this.descript = this.$str(this.descript,0,200);
      }    
    },  
    fwService(){
      let params = {
        serviceId:this.serviceId
      }
      apiHttp.apiCenter.getServiceInfo(params,resp=>{
        if(resp.code == 200){
          this.xiaoxi = resp.data
        }else{
          Toast(resp.message)
        }
      })
    },
      //检查用户有没有完善个人信息
      checkUserInfo(){
        let that = this;
          apiHttp.apiCenter.checkUserInfo('','',resp=>{
              if(resp.code==200){
                  that.status=resp.data;
              }

          })
      },
    // 段位查询
    getServiceInfo(){
      let params = {
        serviceId:this.serviceId
      }
      apiHttp.apiIndex.getServiceInfo(params,resp=>{
        if(resp.code == 200){
          for(let i = 0; i < resp.data.attributeFirst.length; i++){
            if(resp.data.attributeFirst[i].code == 'division'){
              for(let j in resp.data.attributeFirst[i].attributeSecond){
                this.columns.push(resp.data.attributeFirst[i].attributeSecond[j].name);               
              }
              this.dwList = resp.data.attributeFirst[i].attributeSecond
            }
          }

        }
      })
    },
    addService(){
        if(this.status==2){
            Toast('请先去完善个人资料！')
            return;
        }
        if(this.img1==""||this.img1==null){
            Toast('请上传图片！')
            return;
        }
        //this.audioId='这是一段语音'
        if(this.audioId==''){
            Toast('请录制语音');
            return ;
        }
        if(this.descript==''){
            Toast('请输入服务说明！');
            return ;
        }
        if(this.dwValue == '请选择段位等级'||this.dwValue==""||this.dwValue=="请选择段位"){
            Toast("请选择段位等级");
            return ;
        }
      let arrdw = []
      arrdw.push(this.dwValue)
        if(arrdw.length<0){
            Toast('请选择服务设置！');
            return ;
        }
      let params = {
        audioId:this.audioId,
        authImage:this.img1,
        descript:this.descript,
        serviceId:this.serviceId,

      }
      //服务认证添加接口
      apiHttp.apiCenter.addServiceFw(this.secondAttributeIds,params,resp=>{         
        if(resp.code == 200){
          Toast('提交服务认证成功，请耐心等待...')
          setTimeout(()=>{
            this.$router.push({
              name:'service'
            })
          },2000)
        }else{
          Toast(resp.message)
        }
      })
    },
    // 上传图片
    changeImage(){
        this.loading = true
        let fd = new FormData()
        fd.append('model','serviceAuth/image')
        if (this.$refs.avatarInput1.files.length !== 0) {
            fd.append('file', this.$refs.avatarInput1.files[0])
        }
        apiHttp.apiCenter.uploadImg(fd,resp=>{
            if(resp.code == 200){
                this.img1 = resp.data.url
                this.loading = false
            }else{
                Toast(resp.message)
            }
        })
    },
    // 上传语音
    changeVoice(){
      this.loadingVoice = true
      let fd = new FormData()
        fd.append('model','serviceAuth/audio')
        if (this.$refs.avatarInput2.files.length !== 0) {
            fd.append('file', this.$refs.avatarInput2.files[0])
        }
        apiHttp.apiCenter.uploadImg(fd,resp=>{
            if(resp.code == 200){
                this.audioId = resp.data.url
                this.loadingVoice = false
            }else{
                Toast(resp.message)
            }
        })
    },
    onChange(picker,value,index){
      this.dwValue = value;
      this.secondAttributeIds = this.dwList[index - 1].id;     
    },
    dolevel() {
      this.level = false
    },
    //段位等级
    listentoLevelClick() {
      this.level = true
    },
    // 调取录音功能
    isIosVoice(){
      window.webkit.messageHandlers.toRecord.postMessage(this.$loadPath())
    },
    // 接收iosApp上传的录音地址
    iosVicoeUpdate(url){
      this.audioId = url
    },
  }
};
</script>
<style scoped>
.bigimg{
  width: 100%;
}
.fwdescribtion>span {
  position: absolute;
  bottom: 0.8rem;
  right: 6%;
  color: #999;
}
.audioPopup {
  width: 90%;
  border-radius: 0.2rem;
  padding: 0.4rem 0;
}
.dwlevel {
  height: 10rem;
  overflow: hidden;
}
.submit span {
  min-width: 70%;
  margin: 1rem 0 0.6rem;
  padding: 0.4rem 0.6rem;
  font-size: 0.6rem;
}
.fwdescribtion {
  padding: 0.6rem 0.8rem;
}
.fwdescribtion textarea {
  border: 0.04rem solid rgb(233, 231, 231);
  width: 95%;
  padding: 0.4rem 2.5%;
  min-height: 2.4rem;
  resize: none;
  border-radius: 0.16rem;
}
.audio .van-row {
  padding: 0.5rem 0;
}
.audio p.btn {
  padding: 0 0 1.2rem;
}
.space {
  padding: 0 1.2rem;
}
.space .van-col {
  max-width: 45%;
}
.yw-service {
  background: #f5f5f5;
}
.content {
  background: #fff;
  margin-bottom: 0.4rem;
}
.content p.desc {
  line-height: 2rem;
}
.content p.desc span {
  position: absolute;
  right: 0.6rem;
}
.content p.test {
  padding: 0.4rem 0 0.6rem;
}
.content .icons_line {
  line-height: 2rem;
  border-bottom: 0.02rem solid rgb(233, 231, 231);
  margin-left: 0.8rem;
  padding-left: 1rem;
}
.space img {
  width: 5.6rem;
  height: 4.2rem;
  overflow: hidden;
}
.audio img {
  max-width: 80%;
}
.playaudio img {
  max-width: 0.88rem;
}
.setup {
  background: url('../../assets/image/service/icon_arrow_gy@2x.png') no-repeat 89% center;
  background-size: 0.42rem 0.7rem;
  padding-right: 1rem;
}
.uploadFile .van-icon {
  width: 5.6rem;
  height: 4.2rem;
  background: url('../../assets/image/service/button_file@2x.png') no-repeat center center;
  background-size: cover;
}
.uploadFile .van-icon-photograph::before {
    content: none;
}
.content .icons_fw1 {
  background: url('../../assets/image/service/icon_cover@2x.png') no-repeat left center;
  background-size: 0.88rem 0.88rem;
}
.content .icons_fw2 {
  background: url('../../assets/image/service/icon_voice@2x.png') no-repeat left center;
  background-size: 0.88rem 0.88rem;
}
.content .icons_fw3 {
  background: url('../../assets/image/service/icon_service@2x.png') no-repeat left center;
  background-size: 0.92rem 0.88rem;
}
.content .icons_fw4 {
  background: url('../../assets/image/service/icon_install@2x.png') no-repeat left center;
  background-size: 0.92rem 0.88rem;
}
.content1 {
  min-height: 200px;
  max-height: 200px;
  overflow-y: scroll;
}
.content1 li.active,.content li:hover {
  color: #333;
  border-top: 0.02rem solid rgb(233, 231, 231);
  border-bottom: 0.02rem solid rgb(233, 231, 231); 
}
.content1 li {
  color: #999;
  text-align: center;
  padding: 0.4rem 0;
}
.title {
    font-size: 0.56rem;
    padding: 0.6rem 0.6rem;
    border-bottom: 0.03rem solid rgb(233, 231, 231);
}
.file-box{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    font-size: 0;
    border: none;
    z-index: 99;
    background: none;
    opacity: 0;
}
/* 协议样式 */
.czxy-style{
    padding: .6rem;
    text-align: center;
}
.czxy-style h4{
    height: 0.2rem;
    text-align: left;
    padding-left: 1rem;
}
.czxy-style h3{
  text-align: left;
  height: 0.4rem;
}
.czxy-style span{
    text-align: left;
    display: block;
}
.czxy-style p{
   margin: 0.3rem 0;
}
/* 导师协议 */
.guize{
  height: 100%;
  width: 90%;
  padding:0.5rem 1rem 4rem 1rem;
}
.guize>h2{
  text-align: center;
}
.updateVooce{
  position: relative;
  width: 100%;
  height: 1.6rem;
  text-align: center;
}
.updateVooce input{
  position: absolute;
  left: 0;
  top:0;
  width: 100%;
  height: 1.6rem;
  display: block;
  z-index: 99;
}
.lading-black{
  position: absolute;
  left: calc(2.8rem - 15px);
  top: calc(2.1rem - 15px);
}
.nullVoice{
  height: 2rem;
  line-height: 2rem;
}
.lading-voice{
  margin: 0 auto;
}
</style>